﻿@{
    ViewBag.Title = "疯狂大转盘，抽奖到手软Iphone6s";
    
}
@model List<LY.Entity.T_Prize>
<style>
    .t1 h3 {
        color: #864804;
        padding-top: 20px;
    }

    .t2, t3 {
        float: left;
        width: 50%;
    }

        .t2 p {
            width: 80%;
            padding-top: 10px;
        }

            .t2 p span.title {
                display: block;
                border-bottom: 2px solid #ae0000;
                font-size: 18px;
                color: #c2b914;
                font-weight: 800;
                height: 30px;
            }

    .t3 {
        padding-left: 5%;
        width: 45%;
    }

    .GetGift {
        background-color: #FF8434;
        font-weight: 800;
        font-size: 15px;
        cursor: pointer;
    }



    #layer {
        background: #f5f5f5;
        border: #000 solid 1px;
        padding: 20px;
        position: relative;
        left: 50%;
        top: 50%;
        display: none;
    }

    .res {
        font-family: 'Microsoft YaHei';
        margin-top: 0px;
        padding: 0px;
    }

    .btn-main2:hover {
        text-decoration: none;
    }

    .change_banner {
        height: 470px;
        background: url(../../Content/change/images/banner1.jpg) no-repeat center center;
    }

    .body {
        width: 100%;
        margin: 0px auto;
        padding-top: 50px;
        background-color: #fd394f;
        font-family: 'Microsoft YaHei';
    }

        .body .con {
            width: 1200px;
            margin: 0px auto;
        }
    /* 大转盘样式 */
    .zhuan {
        display: block;
        width: 95%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
    }

        .zhuan .turnplate {
            display: block;
            width: 100%;
            position: relative;
        }

            .zhuan .turnplate canvas.item {
                width: 100%;
            }

            .zhuan .turnplate img.pointer {
                position: absolute;
                width: 31.5%;
                height: 42.5%;
                left: 34.6%;
                top: 23%;
            }

    .guize_con p {
        color: #ffd570;
        font-size: 18px;
        line-height: 30px;
    }

    .guize_fajiang_con p {
        color: #fff;
        font-size: 18px;
        line-height: 30px;
    }

    .sca ul li div {
        font-size: 20px;
    }
</style>

<div class="change_banner"></div>
<div class="body">
    <div style="height: 277px; background: url(../../../Content/change/choujiang/zhuan_top.jpg)  no-repeat center center;"></div>
    <div class="con">
        <div class="t1">
            <div style="margin-top: -100px;">
                <div style="float: left; width: 320px; height: 120px; background-image: url(../../../Content/change/choujiang/bscore.png);">
                    <div style="padding-left: 120px; padding-top: 43px; font-size: 18px; color: #fff;">您还有<span style="color: #f75651; font-size: 25px;"><b id="bScore">@ViewBag.score</b></span>积分</div>
                </div>
                <div style="float: left; line-height: 100px; font-size: 30px;">
                    @if (string.IsNullOrEmpty(ViewBag.memberName))
                    {
                        <a href="/Login/Index"><span style="color: #ffd570;">立即登录，</span><span style="color: #fff;">转盘抽大奖</span></a>
                    }
                    else
                    {
                        <span style="color: #ffd570;">欢迎您！<a href="/Account/Index" style="color: #fff;">@ViewBag.memberName</a></span>
                    }
                </div>
                <div style="clear: both;"></div>
            </div>
        </div>
        <div>
            <div class="t2">
                <div id="flashContent" style="z-index: 1000">
                    <img src="../../../Content/change/choujiang/jifen.png" id="shan-img" style="display: none;" />
                    <img src="../../../Content/change/choujiang/2.png" id="sorry-img" style="display: none;" />
                    <img src="../../../Content/change/choujiang/shouhuan.png" id="shouhuan" style="display: none;" />
                    <img src="../../../Content/change/choujiang/iphone.png" id="iphone" style="display: none;" />
                    <div class="zhuan">
                        <div class="turnplate" style="background-image: url(../../../Content/change/choujiang/turnplate-bg.png); background-size: 100% 100%; width: 500px; height: 500px;">
                            <canvas class="item" id="wheelcanvas" width="422px" height="422px"></canvas>
                            <img class="pointer" src="../../../Content/change/choujiang/turnplate-pointer.png" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="t2 t3">
                <div class="gg_1" style="width: 450px; height: 450px; cursor: none; background-image: url(../../../Content/change/choujiang/zhongjiang.png); position: absolute;">
                    <div id="sc" class="scrollText" style="margin: 200px 10px 200px 100px; overflow: hidden; height: 200px; padding-top: 50px; margin-top: 120px; position: absolute;">
                        <ul id="sca" style="line-height: 30px; cursor: text;">
                            @foreach (var item in ViewBag.prizeList)
                            {
                                <li>
                                    <div style="width: 100px; float: left; cursor: text;">
                                         @item.MemberName&nbsp;
                                    </div>
                                    <div style="width: 100px; float: left; cursor: text;">
                                        获得&nbsp;
                                    </div>
                                    <div style="width: 120px; float: left; cursor: text;"><span style="font-size: 18px; color: #ae0000">@item.Prize</span></div>
                                    <div style="clear: both;"></div>
                                </li>
                            }
                        </ul>
                    </div>
                </div>


            </div>
            <div style="clear: both; height: 0px; height: 50px;"></div>
        </div>

        <div style="color: #fff; font-size: 20px;">
            <p>活动时间  2015年1月6日—3月5日</p>
            <p>活动主题：</p>
            <p>热烈庆祝全局金服消费金融平台正式上线！</p>
            <br />
            <p>抽奖条件：用户每次抽奖需要扣除200财富积分，扣除的积分不退还。</p>
            <p>用户中奖后请登录会员中心-个人中心-抽奖记录查看，网站实时公布获奖者名单。</p>
            <br />
            <br />
            <div style="font-size: 30px; color: #ffd570;">奖项设置</div>
            <div style="padding: 5px; background: url(../../../Content/change/choujiang/qian.png) no-repeat right" class="guize_con">

                <div style="padding-left: 20px; padding-bottom: 30px;">
                    <p>一等奖：iPhone6S 一台或价值人民币5000元的境外或境内旅游产品(2选1)</p>
                    <p>二等奖：SMART EXPERTS智能手环一个 (20名)</p>
                    <p>三等奖：财富积分5000分</p>
                    <p>四等奖：财富积分1000分</p>
                    <p>五等奖：财富积分500分</p>
                </div>
                <br />
            </div>
            <div style="padding: 5px;" class="guize_fajiang_con ">
                <p>●如果您中奖，我们将在开奖后7个工作日内与您联系，礼品将在联系确认后一个月内送达，请您务必检查奖品后进行签收；</p>
                <p>●由于收货人资料填写有误造成礼品不能送达，此礼品将不会被再次发放，敬请在开奖前，务必对您的收货地址进行确认；</p>
                <p>●自中奖之日起15天内，仍不能取得联系的中奖者将被视为自动放弃礼品，敬请您参加抽奖后，保持所登记联系方式畅通；</p>
                <p>●如活动受政府机关指令需要停止举办的，或活动遭受严重网络攻击需暂停举办的，或者系统故障导致的其它意外问题，全局金服无需为此承担赔偿或者进行补偿。</p>
                <br />
                <p>
                    最终解释权归上海全局互联网金融信息服务有限公司所有
                </p>
            </div>


        </div>
        <div style="clear: both; height: 0px; height: 50px;"></div>
    </div>
</div>


<div id="choujiang" style="display: none">
    <h2><span>
        <label id="lblMname" name="lblMname"></label>
    </span>
    </h2>
    <br />
    <input type="button" id="return" onclick="window.parent.location.reload()" class="button" value="关闭" />
</div>


<script src="~/Content/change/js/zhuanpan.js"></script>
<script type="text/javascript">
    var util = {};
    var options = {
        GetUrl: "@Url.Action("GetGift")",//领取奖品
        GetRatesUrl: "@Url.Action("SetRates")",
        GetPrizeUrl: "@Url.Action("GetPrize")"
    };
</script>
<script src="~/Scripts/jQuery.textSlider.js"></script>
<script src="~/Content/change/js/MSClass.js"></script>
<script src="~/Content/change/js/awardRotate.js"></script>
<script type="text/javascript">
    var turnplate = {
        restaraunts: [],
        colors: [],					
        outsideRadius: 192,			
        textRadius: 155,				
        insideRadius: 68,		
        startAngle: 0,			

        bRotate: false			
    };

    $(document).ready(function () {
        turnplate.restaraunts = ["500积分", "智能手环", "5000积分", "1000积分", "iphone6s", "谢谢参与"];
        turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF"];

        var rotateTimeOut = function () {
            $('#wheelcanvas').rotate({
                angle: 0,
                animateTo: 2160,
                duration: 8000,
                callback: function () {
                    alert('网络超时，请检查您的网络设置！');
                }
            });
        };

        var rotateFn = function (item, txt) {
            var angles = item * (360 / turnplate.restaraunts.length) - (360 / (turnplate.restaraunts.length * 2));
            if (angles < 270) {
                angles = 270 - angles;
            } else {
                angles = 360 - angles + 270;
            }
            $('#wheelcanvas').stopRotate();
            $('#wheelcanvas').rotate({
                angle: 0,
                animateTo: angles + 1800,
                duration: 8000,
                callback: function () {
                    keleyidialog(txt);
                    turnplate.bRotate = !turnplate.bRotate;
                }
            });
        };

        $('.pointer').click(function () {
            if (turnplate.bRotate) return;
            turnplate.bRotate = !turnplate.bRotate;
            //获取随机数(奖品个数范围内)
            $.post(options.GetPrizeUrl + "?r=" + new Date().getMilliseconds(), { length: turnplate.restaraunts.length },
                    function (res) {
                        if (res.Status > 0) {
                            rotateFn(res.Data, turnplate.restaraunts[res.Data - 1]);
                        }
                        else if (res.Status == -2) {
                            alert(res.Message);
                            window.location.href = "/Login/Index";
                            return false;
                        }
                        else if (res.Status == -3) {
                            alert(res.Message);
                            return false;
                        }
                    },
                    "json"
              );
        });
    });

    window.onload = function () {
        drawRouletteWheel();
    };

    function drawRouletteWheel() {
        var canvas = document.getElementById("wheelcanvas");
        if (canvas.getContext) {
            //根据奖品个数计算圆周角度
            var arc = Math.PI / (turnplate.restaraunts.length / 2);
            var ctx = canvas.getContext("2d");
            //在给定矩形内清空一个矩形
            ctx.clearRect(0, 0, 422, 422);
            //strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式  
            ctx.strokeStyle = "#FFBE04";
            //font 属性设置或返回画布上文本内容的当前字体属性
            ctx.font = '20px Microsoft YaHei';
            for (var i = 0; i < turnplate.restaraunts.length; i++) {
                var angle = turnplate.startAngle + i * arc;
                ctx.fillStyle = turnplate.colors[i];
                ctx.beginPath();
                //arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线（用于创建圆或部分圆）    
                ctx.arc(211, 211, turnplate.outsideRadius, angle, angle + arc, false);
                ctx.arc(211, 211, turnplate.insideRadius, angle + arc, angle, true);
                ctx.stroke();
                ctx.fill();
                //锁画布(为了保存之前的画布状态)
                ctx.save();

                //----绘制奖品开始----
                ctx.fillStyle = "#E5302F";
                var text = turnplate.restaraunts[i];
                var line_height = 17;
                //translate方法重新映射画布上的 (0,0) 位置
                ctx.translate(211 + Math.cos(angle + arc / 2) * turnplate.textRadius, 211 + Math.sin(angle + arc / 2) * turnplate.textRadius);

                //rotate方法旋转当前的绘图
                ctx.rotate(angle + arc / 2 + Math.PI / 2);

                /** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/
                if (text.indexOf("M") > 0) {//流量包
                    var texts = text.split("M");
                    for (var j = 0; j < texts.length; j++) {
                        ctx.font = j == 0 ? 'bold 20px Microsoft YaHei' : '16px Microsoft YaHei';
                        if (j == 0) {
                            ctx.fillText(texts[j] + "M", -ctx.measureText(texts[j] + "M").width / 2, j * line_height);
                        } else {
                            ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
                        }
                    }
                } else if (text.indexOf("M") == -1 && text.length > 6) {//奖品名称长度超过一定范围 
                    text = text.substring(0, 6) + "||" + text.substring(6);
                    var texts = text.split("||");
                    for (var j = 0; j < texts.length; j++) {
                        ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
                    }
                } else {
                    //在画布上绘制填色的文本。文本的默认颜色是黑色
                    //measureText()方法返回包含一个对象，该对象包含以像素计的指定字体宽度
                    ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
                }

                //添加对应图标
                if (text.indexOf("积分") > 0) {
                    var img = document.getElementById("shan-img");
                    img.onload = function () {
                        ctx.drawImage(img, -15, 20);
                    };
                    ctx.drawImage(img, -15, 20);
                } else if (text.indexOf("谢谢参与") >= 0) {
                    var img = document.getElementById("sorry-img");
                    img.onload = function () {
                        ctx.drawImage(img, -15, 20);
                    };
                    ctx.drawImage(img, -15, 20);
                }
                else if (text.indexOf("6s") >= 0) {
                    var img = document.getElementById("iphone");
                    img.onload = function () {
                        ctx.drawImage(img, -15, 20);
                    };
                    ctx.drawImage(img, -15, 20);
                }
                else if (text.indexOf("手环") >= 0) {
                    var img = document.getElementById("shouhuan");
                    img.onload = function () {
                        ctx.drawImage(img, -15, 20);
                    };
                    ctx.drawImage(img, -15, 20);
                }
                //把当前画布返回（调整）到上一个save()状态之前 
                ctx.restore();
                //----绘制奖品结束----
            }
        }
    }

</script>
<script>
    function keleyidialog(prize) {
        $("#lblMname").html("");
        $("#lblMname").html(prize);
        $.dialog({
            lock: true,
            fixed: true,
            background: '#000', /* 背景色 */
            opacity: 0.5,       /* 透明度 */
            width: 400,
            height: 250,
            content: $("#choujiang").html(),
            title: '抽奖结果',
            close: function () {
                location.reload();
            }
        });
    }
    $(document).ready(function () {

        var Marquee1 = new Marquee("sc")				//禁止鼠标控制暂停或滚动实例
        Marquee1.ScrollStep = 1;						//禁止鼠标控制
        Marquee1.Start();
    });
</script>


